<!DOCTYPE html>
<html lang="en">
  
  <head>
    <meta charset="UTF-8">
    <title>Large Tree Layout</title>
  </head>
  
  <body>
    <select id="layout">
      <option value="dendrogram">系统树</option>
      <option value="compactBox">紧凑树</option>
      <option value="mindmap">脑图布局</option></select>
    <div id="mountNode"></div>
    <script src="assets/hierarchy.js"></script>
    <script src="../build/g6.js"></script>
    <script>
      let currentLayout = 'dendrogram';
      const layouts = {
        dendrogram: function(data) {
          return Hierarchy.dendrogram(data, {
            direction: 'LR',
            // H / V / LR / RL / TB / BT
            nodeSep: 50,
            rankSep: 100
          })
        },
        compactBox: function(data) {
          return Hierarchy.compactBox(data, {
            direction: 'LR',
            getId(d) {
              return d.id;
            },
            getHeight() {
              return 16
            },
            getWidth() {
              return 16
            },
            getVGap() {
              return 50
            },
            getHGap() {
              return 50
            }
          });
        },
        mindmap: function(data) {
          return Hierarchy.mindmap(data, {
            direction: 'H',
            getHeight() {
              return 16;
            },
            getWidth() {
              return 16;
            },
            getVGap() {
              return 50;
            },
            getHGap() {
              return 50;
            }
          });
        }
      };
      const graph = new G6.TreeGraph({
        container: 'mountNode',
        width: 1000,
        height: 800,
        //renderer: 'svg',
        animate: false,
        modes: {
          default: ['collapse-expand', 'drag-canvas']
        },
        defaultNode: {
          size: 16,
          anchorPoints: [[0, 0.5], [1, 0.5]],
          style: {
            fill: '#40a9ff',
            stroke: '#096dd9'
          }
        },
        defaultEdge: {
          shape: 'cubic-horizontal',
          style: {
            stroke: '#A3B1BF'
          }
        },
        layout: layouts.dendrogram
      });
      let nodeCount = 0;
      function generateChildren(node, count, level) {
        //const count = parseInt(Math.random() * maxCount);
        const rst = [];
        for (var i = 0; i < count; i++) {
          nodeCount++;
          rst.push({
            id: node.id + i,
            label: node.id + '-' + i
          });
        }
        if (level <= 3) {
          rst.forEach(subNode => {
            generateChildren(subNode, count, level + 1)
          });
        }
        node.children = rst;
      }
      const data = {
        isRoot: true,
        id: '0',
        style: {
          fill: 'red'
        }
      };
      generateChildren(data, 6, 0);

      graph.data(data);
      graph.render();
      graph.on('beforepaint', () => {
        let hideCount = 0;
        const nodes = graph.getNodes();
        nodes.forEach(node => {
          const model = node.get('model');
          const point = graph.getCanvasByPoint(model.x, model.y);
          const nodeGroup = node.get('group');
          if (point.x < 0 || point.y < 0 || point.x > 1000 || point.y > 800) {
            hideCount++;
            node.hide();
          } else {
            node.show();
          }
        });

        const edges = graph.getEdges();
        edges.forEach(edge => {
          const sourceNode = edge.get('sourceNode');
          const targetNode = edge.get('targetNode');
          if (!sourceNode.get('visible') && !targetNode.get('visible')) {
            edge.hide();
          } else {
            edge.show();
          }
        })
      });
      graph.fitView();
      console.log(nodeCount);
    </script>
  </body>

</html>